<template>
    <div class="content">
        <popover :type="1"/>

        <filter-data :showType='2' :showCategory="showCategory"/>

        <div class="table-head" v-show="showTable || showTableEmpty">
            <div class="head-left" :class="{'head-left-shadow': managerList.length > 0 ? true : false }">广告组</div>
            <div class="head-right">成效</div>
        </div>

        <div class="table">
            <el-table v-show="showTableEmpty" style="width: 100%" empty-text=" ">
                <el-table-column label="操作" width="160"></el-table-column>
                <el-table-column label="状态" width="140"></el-table-column>
                <el-table-column label="广告组名称" width="200"></el-table-column>
                <el-table-column label="每次点击最高出价" width="150"></el-table-column>
                <el-table-column label="展示数" width="120"></el-table-column>
                <el-table-column label="点击数" width="120"></el-table-column>
                <el-table-column label="点击率" width="120"></el-table-column>
                <el-table-column :render-header="renderHeader" width="120"></el-table-column>
                <el-table-column label="已花费" width="150"></el-table-column>
                <!--<el-table-column :render-header="renderHeader" width="120"></el-table-column>-->
                <el-table-column label="开始时间" width="150"></el-table-column>
                <el-table-column label="结束时间" width="150"></el-table-column>
            </el-table>
            <div class="empty-content" v-show="showTableEmpty">
                <div style="width: 100%">
                    <img src="../../../assets/img/no-data.png">
                </div>
                <span>暂无数据</span>
            </div>

            <loading :customClass="customLoading" v-if="showLoading" />

            <el-table
                    empty-text=" "
                    v-show="showTable"
                    :row-class-name="tableRowClassName"
                    :data="managerList"
                    style="width: 100%">
                <el-table-column fixed label="操作" width="160">
                    <template scope="scope">
                        <div v-show="scope.row.type != 'category' && scope.row.type != 'summary'">
                            <el-switch v-show="scope.row.effectiveStatus != 'DELETED'" class="create-switch" v-model="scope.row.switchStatus" @change="handleSwitchChange(scope.row)" on-text="" off-text="" ></el-switch>
                            <i v-show="scope.row.effectiveStatus != 'DELETED'" class="iconfont icon-edit icon-action"  @click="edit(scope.row)"></i>
                            <nuxt-link :to="{ path: '/statistics/index_Google', query: {type: 2 , id: scope.row.id}}">
                                <i class="iconfont icon-table icon-action" :class="{ 'delete-span': scope.row.effectiveStatus == 'DELETED'}"></i>
                            </nuxt-link>
                            <i v-show="scope.row.effectiveStatus != 'DELETED'" class="iconfont icon-dustbin icon-action" @click="deleteAds(scope.row.id,scope.row.platFormId)"></i>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="状态" width="140">
                    <template scope="scope">
                        <div v-show="scope.row.type != 'category' && scope.row.type != 'summary'">
                            <span v-if="scope.row.displayColor == 'BLUE'" class="status-pot pot-blue"></span>
                            <span v-if="scope.row.displayColor == 'RED'" class="status-pot pot-red"></span>
                            <span v-if="scope.row.displayColor == 'GRAY'" class="status-pot pot-grey"></span>
                            <span>{{scope.row.statusName}}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="广告组名称" width="200">
                    <template scope="scope">
                        <div style="cursor: pointer" @click="goAds(scope.row.id)">{{scope.row.adGroupName}}</div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="每次点击最高出价" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.type != 'summary' && scope.row.maxCpc">￥{{scope.row.maxCpc}}</span>
                        <span v-if="scope.row.type == 'summary'">{{scope.row.typeName}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="impressions" label="展示数" width="120"></el-table-column>
                <el-table-column prop="clicks" label="点击数" width="120"></el-table-column>
                <el-table-column prop="clickCtr" label="点击率" width="120"></el-table-column>
                <el-table-column prop="cpc" :render-header="renderHeader" width="120"></el-table-column>
                <el-table-column prop="spend" label="已花费" width="150"></el-table-column>

                <!--<el-table-column :render-header="renderHeader" width="120">-->
                    <!--<template scope="scope">-->
                        <!--<span v-if="scope.row.avgPosition">{{scope.row.avgPosition.toFixed(2)}}</span>-->
                    <!--</template>-->
                <!--</el-table-column>-->

                <el-table-column prop="startTime" label="开始时间" width="150"></el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="150"></el-table-column>
            </el-table>

            <el-pagination
                    v-show="showTable"
                    class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSizes"
                    :page-size="page.pageSize"
                    layout="prev, pager, next, sizes, jumper"
                    :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import FilterData from '~/components/manager/google/filterData.vue'
    import Popover from '~/components/manager/google/popover.vue'
    import loading from '~/components/loading.vue'
    import * as types from '../../../store/mutation-types/manager/index'
    import { getStatusName4 , getStatus ,switchStatus,getAimName} from '~/assets/js/option'
    import { isInteger , getDate , changeParam, getParam } from '~/assets/js/global'

    import Vue from 'vue'
    import { Table, TableColumn ,Button, Switch , Pagination, Tooltip,Message} from 'element-ui'
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Button);
    Vue.use(Switch);
    Vue.use(Pagination);
    Vue.use(Tooltip);

    export default{
        components: {
            FilterData,
            Popover,
            loading
        },
        layout: 'google-manager',
        data(){
            return{
                showLoading: false,
                customLoading : 'top:550px',
                showCategory: false,
                showTableEmpty:false,
                showTable:false,
                popover: {
                    title: '广告组',
                    name: '广告组名称 :',
                    adName:'',
                    target: '',
                    localId: '',
                    platFormId: ''
                },
                tipPopover: {
                    localId: '',
                    platFormId: ''
                },
                currentPage4: 4,
                managerList: [],
                page: {
                    pageSizes: [10, 20, 50],    // 每页可选条数列表,
                    total: 0,
                    currentPage: 1,
                    pageSize: 10
                },
                filter:{
                    pageNum: 1,
                    pageSize: 10,
                    updateTime:'LAST_7_DAYS',
                    status: '',
                    name: '',
                    category: '',
                    startTime:'',
                    endTime: '',
                    target:'',
                    adSeriesId: ''
                },
                category: {
                    num:'',
                    index:''
                },
                sum: {}
            }
        },
        methods: {
            //编辑广告组状态
            handleSwitchChange(row) {
                var filter={
                    localId: row.id,
                    platFormId: row.platFormId,
                    status: switchStatus(row.switchStatus)
                };
                row.status = switchStatus(row.switchStatus);
                this.$store.dispatch('googleuUdateAdGroupStatus',filter)
                    .then(response => {
                        if(response.data.code != 1){
                            row.switchStatus = !row.switchStatus;
                            row.status = switchStatus(row.switchStatus);
                        }
                    })
                    .catch((error) => {
                        row.switchStatus = !row.switchStatus;
                        row.status = switchStatus(row.switchStatus);
                    })
            },

            //获取列表
            getManagerList() {
                this.showLoading = true;
                this.$store.commit(types.ENABLE_EXPORT,{'enableExport': false});   //禁止导出按钮
                this.$store.dispatch('googleManageListAdGroup',this.filter)
                    .then(response => {
                        if(response.data && response.data.code == 1){
                            let result = response.data;
                            var list = result.data.list;
                            if(list.length > 0) {
                                this.$store.commit(types.ENABLE_EXPORT,{'enableExport': true});   //激活导出按钮
                                //总计
                                var summary= result.data.summation;
                                summary.typeName = '合计';
                                summary.type = 'summary';
                                list.push(summary);
                                for (var i = 0; i < list.length;i++){
                                    list[i].statusName = getStatusName4(list[i].effectiveStatus);
                                    list[i].targetName = getAimName(list[i].target);
                                    list[i].switchStatus = getStatus(list[i].status);
                                    list[i].spend = isInteger(list[i].spend, 1);
                                    list[i].clickCtr = isInteger(list[i].clickCtr,2);
                                    list[i].cpc = isInteger(list[i].cpc, 1);
                                    if(list[i].adEffectiveDetailList && list[i].adEffectiveDetailList.length>0) {
                                        var addList = list[i].adEffectiveDetailList;
                                        for(var j=0;j<addList.length;j++){
                                            addList[j].clickCtr =  addList[j].websiteClickCtr;
                                            addList[j]['type'] = 'category';
                                            if(this.filter.category == 'PLACEMENT'){
                                                addList[j]['adGroupName'] = addList[j].placement;
                                            }else if(this.filter.category == 'IMPRESSION_DEVICE'){
                                                addList[j]['adGroupName'] = addList[j].impressionDevice;
                                            }
                                            list.splice(i+1+j,0,addList[j]);
                                        }
                                    }
                                }
                                this.managerList = list;
                                this.showTable = true;
                                this.showTableEmpty = false;
                                this.showCategory = true;
                                this.showLoading = false;
                                this.page.total = result.data.total;
                                this.page.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;

                                //总计
                                this.sum= result.data.summation;
                            }else {
                                this.showTableEmpty = true;
                                this.showTable = false;
                                this.showCategory = true;
                                this.showLoading = false;
                            }
                        }else {
                            this.showTableEmpty = true;
                            this.showTable = false;
                            this.showCategory = true;
                            this.showLoading = false;
                        }
                    })
                    .catch((error) => {
                        this.showTableEmpty = true;
                        this.showTable = false;
                        this.showCategory = true;
                        this.showLoading = false;
                    })
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
//                changeParam('pageSize',val);
                this.getManagerList();
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
//                changeParam('page',val);
                this.getManagerList();
            },
            //删除广告
            deleteAds(id,platFormId) {
                this.tipPopover.localId = id;
                this.tipPopover.platFormId = platFormId;
                this.$store.commit(types.TIP_POPOVER_DATA ,{tipPopoverData: this.tipPopover});
                this.$store.commit(types.SHOW_TIP_POPOVER ,{showTipPopover: true});
            },
            renderHeader(h, { column, $index }){
                switch ($index) {
                    case 7:
                        return (
                            <el-tooltip content="每点击成本" placement="top">
                        <div>CPC&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                        </el-tooltip>
                    )
                        break;
                    case 9:
                        return (
                            <el-tooltip content="您的广告与其他广告相比的排名" placement="top">
                        <div>平均排名&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                        </el-tooltip>
                    )
                        break;
                }
            },
            filterData(val,type) {
                switch (type){
                    case 0:
                        this.filter.updateTime = val;
                        break;
                    case 1:
                        this.filter.target = val;
                        break;
                    case 2:
                        this.filter.status = val;
                        break;
                    case 3:
                        this.filter.category = val;
                        break;
                    case 4:
                        this.filter.name = val;
                        break;
                    case 6:
                        this.exportTable(val);
                        return;
                    case 7:
                        this.filter.updateTime='';
                        this.filter.startTime = val.slice(0,10);
                        this.filter.endTime = val.slice(13,23);
                        break;
                }
                this.getManagerList();
            },

            //导出表格
            exportTable(val) {
                this.$store.commit(types.EXPORT_STATUS ,{exportStatus: true});
                var filter={
                    updateTime: val.updateTime,
                    status: val.status,
                    name: val.search,
                    target: val.target,
                    category: val.category
                };
                if(val.dateRange) {
                    filter.updateTime = '';
                    filter.startTime = getDate(val.dateRange[0]);
                    filter.endTime = getDate(val.dateRange[1]);
                }
                if(!filter.updateTime && !filter.startTime){
                    filter.updateTime = 'LAST_7_DAYS';
                }
                this.$store.dispatch('googleDownloadAdGroup',filter)
                    .then(response => {
                        if(response.data){
                            window.location.href = response.request.responseURL;
                            this.$store.commit(types.EXPORT_STATUS ,{exportStatus: false});
                        }else {
                            this.$store.commit(types.EXPORT_STATUS ,{exportStatus: false});
                        }
                    })
                    .catch((error) => {
                        this.$store.commit(types.EXPORT_STATUS ,{exportStatus: false});
                    })
            },

            tableRowClassName(row, index) {
                if(row.type == 'category') {
                    return 'info-row';
                } else if(row.type == 'summary'){
                    return 'summary-row';
                }
                return '';
            },

            goAds(id) {
                this.$router.push({path: '/manager/google/2',query : {'adGroupId': id }});
            },
            //判断编辑
            edit(row) {
                if(row.effectiveStatus == 'ACTIVE'){
                    Message.warning({
                        message: '不可修改运行中的广告组'
                    });
                }else {
                    this.$router.push({
                        path: '/create/edit-ad-group',
                        query:{
                            localAdId: row.id ,
                            platFormId: row.platFormId,
                            adPlatform: 'Google'
                        }
                    })
                }
            }
        },
        created() {
            if (process.BROWSER_BUILD ) {
                if(getParam('adSeriesId')){
                    this.filter.adSeriesId = getParam('adSeriesId');
                }
                this.getManagerList();
            }
        }
    }
</script>

<style scoped lang="scss">
    .content {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
    .table-head {
        height: 47px;
        line-height: 44px;
        background: #F0F5F8;
        border: 1px solid #EAEEF0;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        font-family: MicrosoftYaHei-Bold;
        font-size: 13px;
        color: #666666;
        letter-spacing: 0;
        text-indent: 20px;
    .head-left {
        width: 650px;
        float: left;
    }
    .head-right {
        float: left;
    }
    }
    .icon-action {
        color: #B0BEC5;
        margin: 0 5px;
        cursor: pointer;
    }
    .icon-action:first-child {
        margin: 0 5px 0 0;
    }
    .pagination {
        float: right;
        padding: 20px 0 40px 0;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .status-pot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .pot-blue {
        background: #0686F9;
    }
    .pot-red {
        background: #FF3526;
    }
    .pot-grey {
        background: #AAA;
    }
    .empty-content {
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    img {
        width: 100px;
        height: 100px;
    }
    span {
        font-size: 13px;
        color: #0686F9;
        letter-spacing: 0;
        margin: 20px 0 0 -26px;
        display:inline-block;
    }
    }
    .table{
        position: relative;
    }
    }
</style>
